<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 搜索一行 -->
      <div class="sousuo">
        <van-image class="logo" width="69px" height="20px" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        <form class="search">
          <van-search class="input" size="10" placeholder="请输入搜索关键词" />
        </form>
        <van-button class="logoBtn" type="info">登录</van-button>
      </div>
      <!-- 轮播一行 -->
      <div class="lunbo">
        <van-tabs>
          <van-tab v-for="index in 8" :title="'标签 ' + index" :key="index"></van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img class="imgs" src="../../static/banner1.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img class="imgs" src="../../static/banner2.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img class="imgs" src="../../static/banner3.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img class="imgs" src="../../static/banner4.png" />
      </van-swipe-item>
    </van-swipe>
    <!-- 三个小图标 -->
    <div class="m-indexServicePolicy">
      <ul class="g-grow">
        <li class="item">
          <a>
            <i class="iconfont icon-jiangbei"></i>
            <span>网易自营品牌</span>
          </a>
        </li>
        <li class="item">
          <a>
            <i class="iconfont icon-dianzan"></i>
            <span>30天无忧退货</span>
          </a>
        </li>
        <li class="item">
          <a>
            <i class="iconfont icon-a-xiugai2"></i>
            <span>48小时快速退款</span>
          </a>
        </li>
      </ul>
    </div>
    <!-- 十个小商品 -->
    <div class="goods">
      <div class="item">
        <img class="good" src="../../static/c2.png" />
        <span class="goodName">新品首发</span>
      </div>

      <div class="item">
        <img class="good" src="../../static/c2.png" />
        <span class="goodName">居家生活</span>
      </div>
      <div class="item">
        <img class="good" src="../../static/c3.png" />
        <span class="goodName">服饰鞋包</span>
      </div>
      <div class="item">
        <img class="good" src="../../static/c4.png" />
        <span class="goodName">美食酒水</span>
      </div>
      <div class="item">
        <img class="good" src="../../static/c5.png" />
        <span class="goodName">个护清洁</span>
      </div>
      <div class="item">
        <img class="good" src="../../static/c6.png" />
        <span class="goodName">母婴亲子</span>
      </div>
      <div class="item">
        <img class="good" src="../../static/c7.png" />
        <span class="goodName">运动旅行</span>
      </div>
      <div class="item">
        <img class="good" src="../../static/c8.png" />
        <span class="goodName">数码家电</span>
      </div>
      <div class="item">
        <img class="good" src="../../static/c9.png" />
        <span class="goodName">宠物生活</span>
      </div>
      <div class="item">
        <img class="good" src="../../static/c10.gif" />
        <span class="goodName">每日秒杀</span>
      </div>
    </div>
    <!-- 底部大盒子() -->
    <div class="page">
      <div class="lazy1">
        <div class="lazy_one">
          <span class="title_one">——&nbsp;&nbsp;新人专享礼&nbsp;&nbsp; ——</span>
        </div>
        <div class="lazy_center">
          <div class="left">
            <p class="one">新人专享礼包</p>
            <div class="floorpic">
              <img class="floorpic1" src="../../static/floor1.png" />
            </div>
          </div>
          <div class="right">
            <div class="module1">
              <p class="rightTitle1">福利社</p>
              <p class="rightTitle2">今日特价</p>
              <div class="floorpic">
                <img class="floorpic2" src="../../static/floor2.png" />
              </div>
            </div>
            <div class="module2">
              <p class="rightTitle3">新人拼团</p>
              <p class="rightTitle4">1元起包邮</p>
              <div class="floorpic">
                <img class="floorpic3" src="../../static/floor3.png" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="lazy2">
        <div class="lazy_two">
          <span class="title_two">类目热销榜</span>
        </div>
        <div>
          <div class="line1">
            <div class="line1_one"></div>
            <div class="line1_two"></div>
          </div>
          <div class="line2"></div>
        </div>
      </div>
      <div class="lazy3">
        <div class="lazy_three">
          <div class="lazy-left">
            <p class="title1">好好睡</p>
            <p class="title2">黑科技床品</p>
          </div>
          <div class="lazy-right">
            <p class="title3">严选众筹</p>
            <p class="title4">探索美与用</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入vue
import Vue from 'vue';
// 引入VanImage
import { Image as VanImage, Search, Button, Tab, Tabs, Swipe, SwipeItem } from 'vant';

//注册
Vue.use(VanImage);
Vue.use(Search);
Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  name: 'Header',
};
</script>

<style lang="less" scoped>
div {
  width: 100%;
  height: 100%;
  // 头部
  .header {
    width: 376px;
    height: 74px;
    background-color: red;
    .sousuo {
      width: 100%;
      height: 44px;
      display: flex;
      padding-top: 4px;
      align-items: center;
      .logo {
        margin: 0px 8px 0px 0px;
      }
      .search {
        height: 20px;
      }
      .logoBtn {
        height: 20px;
        font-size: 8px;
        margin: 0px 0px 0px 6px;
      }
    }
    .lunbo {
      width: 100%;
      height: 30px;
      font-size: 14px;
      background-color: green;
      display: flex;
      .item {
        width: 72px;
        height: 28px;
        background-color: pink;
      }
    }
  }
  // 轮播
  .my-swipe {
    padding-top: 20px;
    width: 375px;
    height: 185px;
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #60676b;
      .imgs {
        width: 375px;
        height: 185px;
      }
    }
  }
  // 三个小图标
  .m-indexServicePolicy {
    font-size: 12px;
    .g-grow {
      display: flex;
      justify-content: space-between;
      .item {
        padding: 8px;
      }
    }
  }
  // 十个图
  .goods {
    width: 100%;
    height: 180px;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 20%;
      height: 79px;
      // box-sizing: border-box;
      // margin: 16px;
      flex-direction: column;
      text-align: center;

      .good {
        width: 55px;
        height: 55px;
      }
      .goodName {
        display: block;
        font-size: 12px;
      }
    }
  }
  // 底部大盒子
  .page {
    width: 376px;
    .lazy1 {
      width: 376px;
      height: 279px;
      background: rgb(255, 255, 255);
      margin: 12px 0px;
      .lazy_one {
        width: 375px;
        height: 45px;
        text-align: center;
        .title_one {
          font-size: 16px;
        }
      }
      .lazy_center {
        width: 375px;
        height: 219px;
        display: flex;
        margin-left: 14px;
        .left {
          width: 171.5px;
          height: 217px;
          background: rgb(249, 233, 207);
          position: relative;
          .one {
            font-size: 16px;
            color: #333;
            padding: 15px 0px 0px 15px;
          }
          .floorpic {
            .floorpic1 {
              position: absolute;
              width: 129px;
              height: 128.5px;
              top: 60px;
              left: 24px;
            }
          }
        }
        .right {
          width: 171.5px;
          height: 219px;
          margin-left: 8px;
          display: flex;
          flex-direction: column;
          .module1 {
            width: 170px;
            height: 50%;
            background: rgb(251, 226, 211);
            position: relative;
            .rightTitle1 {
              font-size: 16px;
              color: #333;
              margin-left: 8px;
              margin-top: 14px;
            }
            .rightTitle2 {
              font-size: 12px;
              color: #7f7f7f;
              margin-left: 8px;
            }
            .floorpic {
              .floorpic2 {
                position: absolute;
                width: 100px;
                height: 100px;
                top: 10px;
                left: 66px;
              }
            }
          }
          .module2 {
            width: 170px;
            height: 50%;
            background: rgb(255, 236, 194);
            margin-top: 6px;
            position: relative;
            .rightTitle3 {
              font-size: 16px;
              color: #333;
              margin-left: 8px;
              margin-top: 10px;
            }
            .rightTitle4 {
              width: 68px;
              height: 16px;
              font-size: 12px;
              padding: 0px 5px;
              background: #cbb693;
              color: #fff;
              margin-left: 8px;
            }
            .floorpic {
              .floorpic3 {
                width: 100px;
                height: 100px;
                position: absolute;
                top: 10px;
                left: 72px;
              }
            }
          }
        }
      }
    }
    .lazy2 {
      width: 376px;
      height: 355px;
      background: rgb(255, 255, 255);
      margin: 12px 0px;
      .lazy_two {
        width: 375px;
        height: 50px;
        margin-left: 22px;
        .title_two {
          font-size: 16px;
        }
      }
    }
    .lazy3 {
      width: 376px;
      height: 155px;
      background: rgb(108, 44, 107);
      margin: 12px 0px;
      .lazy_three {
        display: flex;
        .lazy-left {
          width: 171px;
          height: 132px;
          padding: 5px;
          .title1 {
            font-size: 16px;
          }
          .title2 {
            font-size: 12px;
          }
        }
        .lazy-right {
          width: 171px;
          height: 132px;
          .title3 {
            font-size: 16px;
          }
          .title4 {
            font-size: 12px;
            color: rgb(255, 111, 15);
          }
        }
      }
    }
  }
}
</style>
